<div class="cx-page">
  <header class="cx-page__header">
    <h1 class="cx-page__title">Reset Password</h1>
  </header>
  <section class="cx-page__section reset-password container">
    <div class="row justify-content-center">
      <div class="col-md-6">
        <div class="cx-section">
          <h1 class="cx-section__title">Reset password</h1>
          <p>Enter the email address associated with your account</p>
          <form (submit)="requestPasswordReset()" [formGroup]="form">
            <div class="form-group">
              <label>
                <span class="label-content">Email address</span>
                <input
                  type="email"
                  class="form-control"
                  placeholder="Enter email"
                  formControlName="userId"
                  [ngClass]="{
                    'is-invalid':
                      form.controls['userId'].touched &&
                      form.controls['userId'].invalid
                  }"
                />
              </label>
              <div
                class="invalid-feedback"
                *ngIf="
                  form.controls['userId'].touched &&
                  form.controls['userId'].invalid
                "
              >
                <span>This is not a valid email format.</span>
              </div>
            </div>

            <button
              type="submit"
              class="btn btn-block btn-primary"
              [disabled]="form.invalid"
            >
              Submit
            </button>
            <a
              class="btn btn-block btn-secondary"
              [routerLink]="{ route: ['login'] } | cxTranslateUrl"
              >Cancel</a
            >
          </form>
        </div>
      </div>
    </div>
  </section>
</div>
